<template>
	<view class="index mainBg h100" :style="`padding-top: ${statusBarHeight}px;`">
		<view class="navBar">
			<uni-search-bar v-model="keyword" class="uni-mt-10" radius="50" placeholder="搜索课程" clearButton="auto"
				cancelButton="none" @confirm="search" />
			<navigator url="/pages/user/message/message">
				<view class="message">
					<image src="@/static/bell.png" mode=""></image>
					<text v-if="noRead > 0">{{noRead}}</text>
				</view>
			</navigator>
		</view>
		<swiper class="banner" circular autoplay>
			<swiper-item v-for="item in banner" :key="item.id">
				<image :src="item.imageUrl" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="sort">
			<navigator url="/pages/index/list/course">
				<view class="col">
					<image src="@/static/index/sort-icon1.png" mode=""></image>
					精品课程
				</view>
			</navigator>
			<navigator url="/pages/index/list/series">
				<view class="col">
					<image src="@/static/index/sort-icon2.png" mode=""></image>
					系列课程
				</view>
			</navigator>
			<navigator url="/pages/course/target/target">
				<view class="col">
					<image src="@/static/index/sort-icon3.png" mode=""></image>
					私人定制
				</view>
			</navigator>
			<navigator url="/pages/index/list/free">
				<view class="col">
					<image src="@/static/index/sort-icon4.png" mode=""></image>
					免费专区
				</view>
			</navigator>
		</view>
		<view class="hot" @click="goHotCourse">
			<view class="title">
				精选热门 >>> <image src="@/static/index/index-icon2.png" mode=""></image>
			</view>
			<view class="content">
				<view class="text">
					最新热门课程
					<text>为你推荐最新</text>
				</view>
				<image src="@/static/index/img1.png" mode=""></image>
			</view>
		</view>
		<view class="QA hot">
			<navigator url="/pages/index/QAList/list">
				<view class="title">
					知识问答 >>>
				</view>
				<view class="content">
					<image src="@/static/index/img2.png" mode=""></image>
					<view class="text">
						趣味问答，积分活动
						<text>知识学习，趣味活动</text>
					</view>
				</view>
			</navigator>
		</view>
		<view class="design">
			<view class="title">
				精品推荐
			</view>
			<view class="list">
				<navigator :url="`./list/detail?id=`+item.id" v-for="item in qualityList" :key="item.id">
					<view class="col">
						<item :item="item"></item>
					</view>
				</navigator>
			</view>
		</view>
		<view class="framework design">
			<view class="title">
				系列推荐
			</view>
			<view class="list">
				<navigator :url="`./list/seriesDetail?id=`+item.id" v-for="item in seriesList" :key="item.id">
					<view class="col">
						<view class="item">
							<view class="lable" v-if="item.free == 1">
								免费
							</view>
							<view class="lable" v-else>
								限时特惠
							</view>
							<image :src="item.imageUrl" mode=""></image>
							<view class="text">
								{{item.name}}
							</view>
							<view class="tips">
								{{item.remark}}
							</view>
							<view class="content">
								<view class="left">
									<view class="info" v-for="course,index in item.courseVoList" :key="course.id">
										<image :src="course.imageUrl" mode=""></image>
										<view>{{course.name}}</view>
									</view>
								</view>
								<view class="right">
									<text> 试听</text>
									试听2节课程
								</view>
							</view>
						</view>
					</view>
				</navigator>
			</view>
		</view>
		<popup :show.sync="show" bgColor='none'>
			<view class="adver">
				<image class="image" src="@/static/index/inedx-popup.png" mode="" @click="getCoupon"></image>
				<image class="close" @click="show=false" src="@/static/index/close.png" mode=""></image>
			</view>
		</popup>
	</view>
</template>

<script>
	import popup from '@/components/popup.vue'
	import item from "./list/item.vue"
	export default {
		components: {
			popup,
			item
		},
		data() {
			return {
				statusBarHeight: uni.getStorageSync("statusBarHeight"),
				list: [],
				show: false,
				banner: [],
				qualityList: [],
				seriesList: [],
				keyword: '',
				noRead:0,
			}
		},
		onLoad() {
			this.getData()
			this.getBanner()
			if(uni.getStorageSync('token'))
			{
				this.getUserInfo()
			}
		},
		methods: {
			getData() {
				this.$post("/common/index_data").then(res => {
					// this.list = res.data
					this.qualityList = res.data.qualityVosList
					this.seriesList = res.data.seriesVosList
				})
			},
			getUserInfo() {
				this.$post("/user/info").then(res => {
					this.noRead = res.data.userInfo.messageCount
					if(res.data.userInfo.newuser === '0')
					{
						this.$nextTick(() => {
							this.show = true
						})
					}

				})
			},
			getCoupon(){
				this.$post("/coupon/collectCoupon").then(res =>{
					// console.log(res)
					if(res.code == 200)
					{
						this.$toast("领取成功")
					}else{
						this.$toast(res.msg)
					}
					this.show = false
				})
			},
			getBanner() {
				this.$post("/common/banner_data").then(res => {
					this.banner = res.data
				})
			},
			search() {
				uni.navigateTo({
					url: "/pages/index/search?keyword=" + this.keyword
				})
			},
			goHotCourse() {
				uni.navigateTo({
					url: "/pages/index/list/hot"
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #35CBAD;
	}

	.navBar {
		display: flex;
		align-items: center;
		position: relative;
		justify-content: space-between;

		.uni-searchbar {
			width: calc(100% - 100rpx);
		}

		.message {
			position: absolute;
			width: 56rpx;
			height: 56rpx;
			top: 50%;
			transform: translateY(-50%);
			right: 40rpx;

			text {
				position: absolute;
				background-color: #F90505;
				color: #fff;
				line-height: 30rpx;
				border-radius: 100px;
				padding: 0 12rpx;
				font-size: 24rpx;
				right: 0%;
				top: 0;
				transform: translate(10rpx, -10rpx);
			}
		}
	}

	.banner {
		height: 420rpx;
	}

	.sort {
		display: flex;
		background-color: rgba(117, 249, 253, 0.61);
		border-radius: 20rpx;
		padding: 30rpx 0;
		margin: 30rpx 0;

		uni-navigator {
			width: 25%;
		}

		.col {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;

			image {
				width: 82rpx;
				height: 82rpx;
				margin-bottom: 10rpx;
			}
		}
	}

	.adver {
		width: 500rpx;
		position: relative;

		.close {
			width: 112rpx;
			height: 112rpx;
			position: absolute;
			top: 0;
			right: 0;
			transform: translate(50%, -50%);
		}
	}

	.hot {
		padding: 0 30rpx;
		background-color: rgba($color: #fff, $alpha: 0.4);
		border-radius: 20rpx;
		padding-top: 20rpx;
		margin-bottom: 20rpx;

		.title {
			font-weight: bold;
			font-size: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 50rpx;
			padding-bottom: 20rpx;
			border-bottom: 4rpx solid #333;
			margin-bottom: 20rpx;

			image {
				width: 80rpx;
				height: 80rpx;
			}
		}

		.content {
			display: flex;
			justify-content: space-between;

			image {
				width: 400rpx;
				height: 200rpx;
			}

			.text {
				font-size: 24rpx;
				padding-top: 30rpx;

				text {
					font-size: 28rpx;
					display: block;
					margin-top: 30rpx;
				}
			}
		}
	}

	.QA {
		color: #3865DE;
		background-color: rgba($color: #fff, $alpha: 0.3);

		.title {
			border-color: #3865DE;
		}
	}

	.design {
		margin-top: 40rpx;

		.title {
			padding: 10rpx 25rpx;
			font-weight: bold;
			font-size: 36rpx;
		}

		.list {
			background-color: rgba($color: #75F9FD, $alpha: 0.3);
			border-radius: 20rpx;
			padding: 1rpx 40rpx;

			.col {
				padding: 40rpx 20rpx;
				background-color: #fff;
				margin: 20rpx 0;
				border-radius: 8rpx;
				position: relative;
			}
		}
	}

	.framework {
		.item {
			padding-top: 10rpx;

			.lable {
				position: absolute;
				top: 0%;
				left: 0%;
				color: #fff;
				background-color: $assist-color2;
				font-size: 24rpx;
				line-height: 36rpx;
				width: 100rpx;
				text-align: center;
				border-radius: 8rpx 0 8rpx 0;
			}

			.text {
				font-weight: bold;
			}

			.tips {
				font-size: 24rpx;
				color: #999;
				margin: 10rpx 0;
			}

			.content {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 20rpx;

				.left {
					display: flex;

					.info {
						text-align: center;
						font-size: 28rpx;
						margin-right: 40rpx;

						image {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
						}
					}
				}

				.right {
					text-align: right;
					color: $assist-color2;
					font-size: 24rpx;

					text {
						display: block;
						font-weight: bold;
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>